import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "../../../components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import VideoPlayer from "@/components/VideoPlayer"
import { getDateTime3 } from '@/utils/getDate'
import { apiAppConfigCarouselPage, apiAppConfigCarouselDel } from '@/request/app/appScreenAD'
import TheImage from '@/components/TheImage'
import store from "@/store/store"
import _ from 'lodash';

import { Space, Modal, Input } from "antd";

const { TextArea } = Input;

class screenAD extends React.Component {
    state = {
        columns: [
            {
                title: "广告名称",
                dataIndex: "configCarouselTitle",
                key: "configCarouselTitle",
                render: (text, record) => {
                    return <div style={{
                        width: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis'
                    }}>{record.configCarouselTitle}</div>
                }
            },
            {
                title: "广告类型",
                dataIndex: "configCarouselShowType",
                key: "configCarouselShowType",
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                        case 0:
                            label = "图片"
                            break;
                        case 1:
                            label = "视频"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },
            {
                title: "素材",
                dataIndex: "configCarouselFilez",
                key: "configCarouselFilez",
                render: (text, render) => {
                    if (text) {
                        if (render.configCarouselShowType === 1) {
                            let arr = text.split('|')
                            return <TheImage preview={false} src={arr[1]} width={80} height={80} onClick={() => {
                                this.videoDialog(arr[0])
                            }} />
                        } else {
                            let arr = text.split(',')
                            return <Space>
                                {
                                    arr.map(v => {
                                        return <TheImage src={v} width={80} height={80} />
                                    })
                                }
                            </Space>
                        }
                    }
                }
            },
            {
                title: "时长(秒)",
                dataIndex: "duration",
                key: "duration",
            },
            // {
            //     title: "是否支持跳过",
            //     dataIndex: "evaluationType123",
            //     key: "evaluationType",
            //     render: (text, render) => {
            //         let label = ''
            //         switch (render.evaluationType) {
            //             case 'H':
            //                 label = "是"
            //                 break;
            //             case 'Z':
            //                 label = "否"
            //                 break;
            //             default:
            //                 label = "字段值错误"
            //         }
            //         return label
            //     }
            // },
            // {
            //     title: "是否自动关闭",
            //     dataIndex: "evaluationType222",
            //     key: "evaluationType",
            //     render: (text, render) => {
            //         let label = ''
            //         switch (render.evaluationType) {
            //             case 'H':
            //                 label = "是"
            //                 break;
            //             case 'Z':
            //                 label = "否"
            //                 break;
            //             default:
            //                 label = "字段值错误"
            //         }
            //         return label
            //     }
            // },
            {
                title: "链接",
                dataIndex: "configCarouselUri",
                key: "configCarouselUri",
                render: (text, render) => {
                    if (render.configCarouselType !== '1') {
                        if (render.configCarouselUri !== '') {
                            const carouselUri = JSON.parse(render.configCarouselUri)
                            switch (render.configCarouselType) {
                                case '2':
                                    return carouselUri.storeName
                                    break;
                                case '3':
                                    return carouselUri.goodsName + carouselUri.storeName
                                    break;
                                case '4':
                                    return carouselUri.storeName
                                    break;
                                case '5':
                                    return carouselUri.productName + carouselUri.storeName
                                    break;
                                case '6':
                                    return carouselUri.serviceName + carouselUri.storeName
                                    break;
                                case '7':
                                    return ''
                                    break;
                                case '8':
                                    return ''
                                    break;
                                case '9':
                                    return carouselUri.serviceClassifyName
                                    break;
                                case '10':
                                    return ''
                                    break;
                                case '11':
                                    return ''
                                    break;
                                case '12':
                                    return ''
                                    break;
                                default:
                                    break;
                            }
                        }
                    }
                    else {
                        return text
                    }
                }
            },
            {
                title: "展示时间",
                dataIndex: "time",
                key: "time",
                render: (text, render) => {
                    return render.startTime + " - " + render.endTime
                }
            },
            {
                title: "排序",
                dataIndex: "configCarouselSort",
                key: "configCarouselSort",
            },
            // {
            //     title: "广告状态",
            //     dataIndex: "configCarouselStatus",
            //     key: "configCarouselStatus",
            //     render: (text, render) => {
            //         let label = ''
            //         switch (text) {
            //             case 'Y':
            //                 label = "启用"
            //                 break;
            //             case 'N':
            //                 label = <TheButton onClick={() => this.stopMessage()}>停用</TheButton>
            //                 break;
            //             default:
            //                 label = "字段值错误"
            //         }
            //         return label
            //     }
            // },
            {
                title: "操作",
                fixed: "right",
                width: 200,
                render: (text, render) => {
                    return (
                        <div>
                            {/*<TheButton onClick={() => this.goStop(render.id)}>停用</TheButton>*/}
                            <TheButton onClick={() => this.goEdit(render.configCarouselId)}>编辑</TheButton>
                            <TheButton onClick={() => this.delConfirm(render.configCarouselId)}>删除</TheButton>
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        newColumns: [],
        form_show: true,
        searchOption: [
            {
                field: 'configCarouselTitle',
                label: '广告名称',
                placeholder: '请输入',
                required: false,
                rules: [],
                type: 'Input',
                defaultValue: ''
            },
            {
                field: 'configCarouselShowType',
                label: '广告类型',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [{ value: 0, label: '图片' }, { value: 1, label: '视频' }],
                defaultValue: ''
            },
            // { field: 'pass', label: '是否跳过', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ value: 0, label: '是' }, { value: 1, label: '否' }], defaultValue: '' },
            // { field: 'open', label: '是否关闭', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ value: 0, label: '是' }, { value: 1, label: '否' }], defaultValue: '' },
            // { field: 'configCarouselStatus', label: '广告状态', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ value: 1, label: '启用' }, { value: 0, label: '停用' }], defaultValue: '' },
            { field: 'time', label: '展示时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker' },
        ],
        queryForm: {},
        stopReason: '',
        isvideoModalVisible: false,
        videoAddress: ""
    };

    componentDidMount() {
        this.onColumnsFilter(this.state.columns)
        let searchParams = store.getState().searchValue
        let { pageNo, pageSize, queryForm, pathName } = searchParams
        if (searchParams && pageNo && pathName == 'appScreenAD') {
            this.setState({
                queryForm,
                pageData: {
                    pageNo: pageNo, pageSize: pageSize
                }
            }, () => {
                this.queryFormRef.onSetDefault({
                    ...queryForm
                })
                this.getData()
            })
        } else {
            this.getData()
        }
    };

    // 获取表格数据
    getData = async (values) => {
        let { pageNo, pageSize } = this.state.pageData
        if (values && !_.isEmpty(values.time)) {
            values.startTime = getDateTime3(values.time[0]) + " 00:00:00"
            values.endTime = getDateTime3(values.time[1]) + " 23:59:59"
            delete values.time
        }
        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        }, async () => {
            let { time, ...form } = { ...this.state.queryForm }
            const params = {
                pageNo,
                pageSize,
                queryForm: { ...form, time }
            }
            store.dispatch({
                type: 'SaveSearchValues',
                data: {
                    pathName: 'appScreenAD',
                    ...params
                }
            })
            let res = await apiAppConfigCarouselPage({
                pageNo,
                pageSize, ...this.state.queryForm,
                configCarouselSite: 6,
            })
            if (res.code === 0 && res.data) {
                this.setState({
                    dataSource: res.data,
                    pageData: {
                        pageNo: res.pageNo,
                        pageSize: res.pageSize
                    },
                    total: res.totalCount,
                })
            }
        })
    };
    // row 删除事件
    delConfirm = (e) => {
        React.$confirm({
            title: "是否确认删除?",
            onOk: async () => {
                let res = await apiAppConfigCarouselDel({ configCarouselId: e, })
                if (res.code === 0) {
                    React.$message({
                        type: 'info',
                        content: '删除成功'
                    })
                    let { pageNo, pageSize } = this.state.pageData
                    let { total } = this.state
                    // console.log(pageNo,pageSize,total)
                    if (total % pageSize == 1) {
                        this.setState({
                            pageData: {
                                pageNo: pageNo - 1,
                                pageSize: pageSize
                            }
                        })
                    }
                    this.getData()
                }
            },
        });
    };
    // 新增
    goAdd = () => {
        this.props.history.push(`/app/screenAD/edit/${0}`);
    };
    // 编辑
    goEdit = (id) => {
        this.props.history.push(`/app/screenAD/edit/${id}`);
    };
    // 停用
    goStop = (e) => {
        let that = this;
        Modal.confirm({
            icon: '',
            okText: '确认',
            cancelText: '取消',
            // centered: true,
            title: '是否确认停用',
            style: {
                textAlign: "center"
            },
            content: (
                <div>
                    <TextArea onChange={this.onStopAreaChange} rows={4} placeholder="最多50字" maxLength={50}
                        style={{ width: 400 }} />
                </div>
            ),
            onOk(e) {
                console.log(that.state.stopReason)
            },
        });
    }
    onStopAreaChange = (e) => {
        // console.log('Change:', e.target.value);
        this.setState({
            stopReason: e.target.value
        })
    };
    // 显示停用信息modal
    stopMessage = (e) => {
        Modal.info({
            icon: '',
            okText: '返回',
            title: '停用理由',
            style: {
                textAlign: "center"
            },
            // centered: true,
            content: (
                <div style={{ textAlign: "left" }}>
                    <p>some messages...some messages...</p>
                    <p>some messages...some messages...</p>
                </div>
            ),
            onOk() {
            },
        });
    }
    //
    videoDialog = (e) => {
        this.setState({
            isvideoModalVisible: true,
            videoAddress: e
        })
    }
    videoOk = async () => {
        this.setState({
            isvideoModalVisible: false,
            videoAddress: ""
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };

    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }

    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }

    onFormSearch(values) {
        this.setState({
            pageData: { pageNo: 1, pageSize: 10 }
        }, () => {
            this.getData(values)
        })
    }

    render() {
        const {
            columns,
            dataSource,
            pageData: { pageNo, pageSize },
            total,
            searchOption,
            form_show,
            newColumns,
            isvideoModalVisible, videoAddress
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                    onGetValues={(values) => this.onFormSearch(values)}
                    onReset={(values) => this.onReset(values)}
                >
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >
                    <TheButton type="primary" size="middle" onClick={this.goAdd}>
                        新增
                    </TheButton>
                </TheTableExtend>
                <TheTable
                    // scroll={{ x: "max-content", y: '63vh' }}
                    columns={newColumns}
                    dataSource={dataSource}
                    // loading={true}
                    rowKey={'configCarouselId'}
                />
                <ThePagination
                    pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                {isvideoModalVisible ?
                    <Modal visible={isvideoModalVisible} onOk={this.videoOk} onCancel={this.videoOk}>
                        <VideoPlayer src={videoAddress} />
                    </Modal> : null}
            </div>
        );
    }
}

export default screenAD;
